<template>
  <div :class="['btn', { active: type == 0 }]">
    <span v-show="item.count > 0" @click="countJian(item)">-</span>
    <em v-show="item.count > 0">{{ item.count }}</em>
    <span @click="add(item)">+</span>
  </div>
</template>
<script>
import { mapMutations } from 'vuex';
export default {
  // 接收父元素组件传来的item对象数据 和type字段
  props: ['item', 'type'],
  methods: {
    ...mapMutations(['carAdd']),
    add(food) {
      if (!food.count) {
        food.count = 1;
      } else {
        food.count++;
      }

      this.$store.commit  ('setCarList', {
          item: food,
      });
      this.$store.commit('zongjia');
   
    },
    countJian(food) {
      food.count--;
      this.$store.commit('zongjia');
    },
  },
  computed: {},
};
</script>
<style scoped>
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn > span {
  display: block;
  width: 24px;
  height: 24px;
  line-height: 20px;
  border-radius: 50%;
  font-size: 24px;
  text-align: center;
  font-weight: bold;
  color: rgb(0, 160, 220);
  border: 2px rgb(0, 160, 220) solid;
  margin: 0 20px 0 20px;
}

.active {
  position: absolute;
  right: 10px;
  bottom: 10px;
}
</style>
